<template>
    <div class="cellbox">
			<div class="cell" v-for="item in cells" :key="item.index" @click="clickCell(item,$event)" @mouseenter="mouseenter(item,$event)" :class="{'notallowed' : !item.allow}" @mouseleave="mouseleave()"></div>
			<div class="line line1"></div>
    </div>
</template>
<script type="es6">
import eventBus from '@/libs/eventBus';
import {MeetingTable} from '@/config';
import {parseTime} from '@/libs';
export default {
  data () {
    return {
      cells: [
        {index: 0, allow: true, notallowtip: '', times: [MeetingTable.CrossDay.dayCell.begin, MeetingTable.CrossDay.dayCell.middle]},
        {index: 1, allow: true, notallowtip: '', times: [MeetingTable.CrossDay.dayCell.middle, MeetingTable.CrossDay.dayCell.end]}
      ]
    };
  },
  props: {
    operatingState: {
      type: String,
      default: 'wait'
    },
    day: {
      type: String,
      default: ''
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  components: {},
  computed: {},
  methods: {
    updateCellAllow () {
      let now = new Date();
      let maxdaytime = 0;
      let reday = new Date(this.day);
      if (this.row.ReserveAdvanceDays) {
        let nw = new Date();
        nw.setDate(nw.getDate() + this.row.ReserveAdvanceDays);
        nw.setHours(MeetingTable.CrossDay.dayCell.end, 0, 0, 0);
        maxdaytime = nw.getTime();
      }
      this.cells.forEach((item, index) => {
        if (this.day === parseTime(now, '{y}-{m}-{d}')) {
          if (now.getHours() >= item.times[1]) {
            item.allow = false;
            item.notallowtip = '该时间不可用';
          }
        }
        if (maxdaytime && this.getTimestamp(reday, item.times[0]) > maxdaytime) {
          item.allow = false;
          item.notallowtip = MeetingTable.CrossDay.notallowtip;
        }
      });
    },

    clickCell (item, event) {
      if (!item.allow) {
        return;
      }
      if (this.operatingState === 'wait' || this.operatingState === 'selection') {
        let reday = new Date(this.day);
        let timeregion = [this.getTimestamp(reday, item.times[0]), this.getTimestamp(reday, item.times[1])];
        eventBus.$emit('choseTimeCell', {time: timeregion, row: this.row, index: this.index});
      }
    },
    getTimestamp (date, H) {
      date.setHours(H, 0, 0, 0);
      return date.getTime();
    },
    mouseenter (item, event) {
      if (!item.allow) {
        eventBus.$emit('notAllowCell', event, item.notallowtip);
        return;
      }
      if (this.operatingState === 'selection' || this.operatingState === 'minTime') {
        let reday = new Date(this.day);
        let timeregion = [this.getTimestamp(reday, item.times[0]), this.getTimestamp(reday, item.times[1])];

        eventBus.$emit('mouseenterTimeCell', {time: timeregion, row: this.row, index: this.index});
      }
    },
    mouseleave () {
      eventBus.$emit('notAllowCellleave');
    }
  },
  mounted () {
    this.updateCellAllow();
  },
  destroyed () {
  }
};
</script>
<style lang="less" scoped>
	.cellbox{
		width: 100%;
		height: 100%;
		position: relative;
		.cell{
			width: 50%;
			float: left;
			height: 100%;
			cursor: pointer;
		}
		.line{
			width: 0px;
			height: 100%;
			position: absolute;
			border-right: 1px dashed #ccc;
			pointer-events: none;
		}
		.line1{
			left: 50%;
		}
	}
	.notallowed{
		background: #f5f5f5;
		cursor: not-allowed;
	}
</style>
